<template>
  <div class="usercenterwrap" v-show="this.$store.state.isShowUserCenter">
    <!-- 退出按钮 -->
    <van-image
      class="exitIcon"
      round
      width="1rem"
      height="1rem"
      :src="exitImg"
      @click="exitApp"
    />
    <!-- 头像部分 -->
    <div class="account">
      <van-image class="item" width="64" height="64" :src="userIcon" />
      <span class="item" v-text="userName"></span>
    </div>
    <!-- 信息条目部分 -->
    <div class="infopanel">
      <!-- 护理等级信息 -->
      <div class="nurseinfo">
        <span
          ><van-icon name="info-o" /> <span class="field">护理等级 </span></span
        ><span v-text="nurselevel"></span>
      </div>
      <!-- 服务信息统计 -->
      <div class="service">
        <div class="title">
          <van-icon name="send-gift-o" /><span class="field"> 我的服务</span>
        </div>
        <div class="content">
          <div class="item">
            <van-icon name="volume-o" :badge="warntimes" />
            <span>报警服务</span>
          </div>
          <div class="item">
            <van-icon name="comment-circle-o" :badge="servicetimes" />
            <span>上门服务</span>
          </div>
        </div>
      </div>
      <!-- 热力图分析 -->
      <div class="heatmap">
        <div class="title">
          <van-icon name="points" /><span class="field"> 我的预约</span>
        </div>
        <div class="content">
          <span class="item" @click="queryReservation">服务预约</span>
          <van-icon name="arrow" size="20" @click="queryReservation" />
          <!-- <span class="item" @click="serviceHeatMap">服务</span> -->
        </div>
      </div>
      <!-- 背景图片 -->
      <div class="imgp">
        <van-image
          fit="cover"
          width="10rem"
          height="10rem"
          :src="userCenterBk"
        />
      </div>
    </div>
  </div>
</template>
<script>
import * as SERVICE from '../utils/service'
export default {
  data() {
    return {
      exitImg: require('../../static/imgs/usercenter/exit.png'), //退出按钮
      userIcon: require('../../static/imgs/usercenter/usericon1.png'), //用户图标
      userName: '13131788108',
      nurselevel: '护理二级',
      userCenterBk: require('../../static/imgs/usercenter/bk3.jpg'),
      warntimes: 97, //报警次数
      servicetimes: 12, //上门服务次数
    }
  },
  mounted() {
    this.$nextTick(() => {
      //加载用户信息
      let userinfo = JSON.parse(localStorage.getItem('userinfo'))
      //更新用户信息
      this.$data.userName = userinfo.phoneNum //用户名（默认为手机号）
      this.$data.nurselevel = userinfo.nurseLevel //护理等级
      //根据用户名称更新报警信息
      SERVICE.getWarnTimesByUserName(userinfo.phoneNum).then((res) => {
        let data = res.data
        this.$data.warntimes = data
      })
      //根据用户名称更新上门服务信息
      SERVICE.getServiceTimesByUserName(userinfo.phoneNum).then((res) => {
        let data = res.data
        this.$data.servicetimes = data
      })
    })
  },
  methods: {
    /**
     * 退出登录
     */
    exitApp() {
      // this.$router.push({ name: 'Login' })
      //清空本地缓存
      console.log(window.localStorage)
    },
    /**报警热力图 */
    queryReservation() {
      console.log('服务订单')
      //显示订单服务页面
      this.$store.dispatch('setIsShowOrderList', true)
      // console.log(this.$data.userName)
      // SERVICE.getWarnListByUserName(this.$data.userName).then((res) => {
      //   let data = res.data

      // })
    },
    /**上门服务热力图 */
    // serviceHeatMap() {
    //   console.log('上门服务热力图')
    // },
  },
}
</script>
<style lang="less" scoped>
.usercenterwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background-color: powderblue;
  background-image: url('../../static/imgs/usercenter/bk2.jpg');
  background-size: cover;
  z-index: 6;
  // 字段样式
  .field {
    color: orangered;
    font-weight: 700;
  }
  // 推出按钮样式
  .exitIcon {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
  }
  // 头像部分
  .account {
    height: 20%;
    width: 100%;
    // background-color: khaki;
    border-bottom: 1px solid skyblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item {
      align-self: center;
    }
    .item:last-child {
      font-size: 0.8rem;
      color: #fff;
    }
  }
  // 信息条目部分
  .infopanel {
    height: 70%;
    background-color: #fff;
  }
  //护理等级信息部分
  .nurseinfo {
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    font-size: 0.4rem;
    color: black;
    justify-content: space-around;
    border-bottom: 1px solid skyblue;
    background-color: #fff;
    .item {
      align-self: center;
    }
  }
  //服务信息统计
  .service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 0;
    font-size: 0.4rem;
    color: black;
    border-bottom: 1px solid skyblue;
    .title {
      text-align: left;
      margin-left: 54px;
    }
    .content {
      margin: 14px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
  //热力图分析
  .heatmap {
    font-size: 0.4rem;
    color: black;
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    justify-content: space-around;
    border-bottom: 1px solid skyblue;
    .title {
      text-align: left;
      margin-left: 54px;
    }
    .content {
      display: flex;
      flex-direction: row;
      margin: 14px 0;
      justify-content: space-around;
    }
  }
  .imgp {
    background-color: slateblue;
  }
}
</style>
